import React, { Component } from 'react'
import { NavBar, InputItem, Button } from 'antd-mobile';
import './Register.less'
// 改为容器型组件
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actions, getUser } from '../../store/modules/register';
class Register extends Component {
    render() {
        console.log(this.props);
        let { user, register: { changeUser, reqRegisterAction }, history: { push } } = this.props
        return (
            <div className="register">
                <NavBar
                    mode="dark"
                >注册</NavBar>

                <div>{JSON.stringify(user)}</div>
                <div className="enter_user">
                    <InputItem
                        onChange={(val) => changeUser("nickname", val)}
                        clear
                        placeholder="请输入昵称"
                    >昵称</InputItem>
                    <InputItem
                        clear
                        placeholder="请输入账号"

                        onChange={(val) => changeUser("phone", val)}
                    >账号</InputItem>
                    <InputItem

                        onChange={(val) => changeUser("password", val)}
                        clear
                        placeholder="请输入密码"
                    >密码</InputItem>

                    <Button onClick={() => reqRegisterAction(push)} className="btn_login" type="primary" inline style={{ marginRight: '4px' }}>注册</Button>
                    <div onClick={() => this.props.history.push('/login')} className="tologin">
                        <span>已有账号，去登录</span>
                    </div>
                </div>

            </div>
        )
    }
}

const mapStateToProps = (state) => {
    console.log(state);
    return {
        user: getUser(state)
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        register: bindActionCreators(actions, dispatch)
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Register)